


import React, { FC } from 'react'
import { ProgressCircle, Space } from 'antd-mobile'
import {useCountDown} from 'ahooks'
import { useNavigate } from 'react-router-dom'
// 封装倒计时 组件库

const Dao:FC<{
    color?:string,
    style?:any,
    size?:any 
    dtime?:any 
    onEnd?:any
}> = ({
    color,
    style,
    size,
    dtime,
    onEnd,
}) => {
    const router = useNavigate()
    const total = 100;
    const [percent] = useCountDown({
        // targetDate,   // 目标时间 
        leftTime:dtime * 1000,  // 剩余时间 
        interval:1000,     // 频率  
        onEnd: () => {
            onEnd ? onEnd() : router('/guide')
        },
    });

    return (
        <div className='dao' style={{
            position:"absolute",
            top:20,
            right:20, 
            ...style 
        }} onClick={onEnd}>
             <ProgressCircle
                percent={Math.round(percent/1000) * total/dtime }
                style={{
                    '--fill-color': 'var(--adm-color-warning)',
                    color:color,
                    '--size':size 
                }}
            >
                {Math.round(percent/1000) } S
            </ProgressCircle>
        </div>
    )
}

Dao.defaultProps = {
    color:'#fff',
    style:{
        position:"absolute",
        top:20,
        right:20, 
    },
    dtime:5,
}
export default Dao